<template>
    <div class="index">
        <div class="top" @click="fn">
            <van-search shape="round" background="#4fc08d" placeholder="请输入搜索关键词" />
        </div>
        <div class="pics">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="item in imgs" :key="item.id">
                    <img :src="item.banner" alt="">
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="gongge">
            <van-grid>
                <van-grid-item icon="fire-o " text="热卖中" @click="hot" />
                <van-grid-item icon="bar-chart-o" text="高分榜" @click="hight" />
                <van-grid-item icon="gem-o" text="奖项" @click="awards" />
                <van-grid-item icon="underway-o" text="那年今日" @click="today" />
            </van-grid>
        </div>

        <div class="huadong">
            <section class="hotfang">
                <span>
                    正在热映
                </span>
                <span>
                    {{ tale2 }}部
                </span>
            </section>
            <van-swipe class="my-swipe2" :width="100" :show-indicators="false" :loop="false">
                <van-swipe-item v-for="item in hotimgs.data" :key="item.id">
                    <img :src="item.poster" alt="">
                    <div>{{ item.title }}</div>
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="huadong">
            <section class="hotfang">
                <span>
                    即将上映
                </span>
                <span>
                    {{ tale3 }}部
                </span>
            </section>
            <van-swipe class="my-swipe2" :width="100" :show-indicators="false" :loop="false">
                <van-swipe-item v-for="item in comingimgs.data" :key="item.id">
                    <img :src="item.poster" alt="">
                    <div>{{ item.title }}</div>
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="huadong">
            <section class="hotfang">
                <span>
                    那年今日
                </span>
                <span>
                    {{ tale4 }}部
                </span>
            </section>
            <van-swipe class="my-swipe2" :width="100" :show-indicators="false" :loop="false">
                <van-swipe-item v-for="item in todayimgs.data" :key="item.id">
                    <img :src="item.poster" alt="">
                    <div>{{ item.title }}</div>
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import api from '../../api/index'
import { getIndex } from '../../api/all/index'
export default {
    data() {
        return {
            imgs: [],
            hotimgs: [],
            comingimgs: [],
            todayimgs: [],
            tale2: [],
            tale3: [],
            tale4: [],
            title: [],
            brief: [],
            read_count: [],
            like_count: [],
            username: []

        }
    },
    created() {
        // 第一个轮播图
        // axios.get('https://test-h5-api.ixook.com/index').then(res => {
        //     // console.log(res);
        //     this.imgs = res.data.data.swiper
        // })
        getIndex().then(res => {
            this.imgs = res.data.data.swiper
        })

        // 第二个轮播图
        // axios.get('https://test-h5-api.ixook.com/index').then(res => {
        //     // console.log(res);
        //     // this.tale = res.total
        //     // console.log(res.total);
        //     this.hotimgs = res.data.data.theater
        //     // console.log(this.hotimgs);
        //     this.tale2 = res.data.data.theater.total
        // })
        getIndex().then(res => {
            this.hotimgs = res.data.data.theater
            this.tale2 = res.data.data.theater.total
        })
        // 第三个轮播图
        // axios.get('https://test-h5-api.ixook.com/index').then(res => {
        //     // console.log(res);
        //     // this.tale = res.total
        //     // console.log(res.total);
        //     this.comingimgs = res.data.data.coming
        //     // console.log(this.hotimgs);
        //     this.tale3 = res.data.data.coming.total
        // })
        getIndex().then(res => {
            this.comingimgs = res.data.data.coming
            // console.log(this.hotimgs);
            this.tale3 = res.data.data.coming.total
        })
        // 第四个轮播图
        // axios.get('https://test-h5-api.ixook.com/index').then(res => {
        //     // console.log(res);
        //     // this.tale = res.total
        //     // console.log(res.total);
        //     this.todayimgs = res.data.data.today
        //     // console.log(this.hotimgs);
        //     this.tale4 = res.data.data.today.total
        // })
        getIndex().then(res => {
            this.todayimgs = res.data.data.today
            // console.log(this.hotimgs);
            this.tale4 = res.data.data.today.total
        })

        // 文章咨询的数据
        // api.get().then(res => {
        //     this.todayimgs = res.data.data.article
        //     // console.log(this.hotimgs);
        //     this.title = res.data.data.article.title
        //     this.brief = res.data.data.article.brief
        //     this.read_count = res.data.data.article.read_count
        //     this.like_count = res.data.data.article.like_count
        //     // this.username = res.data.data.article.author.username

        // })



    },
    methods: {
        fn() {
            this.$router.push({
                path: '/search',
            })

        },
        hot() {
            // console.log('11');
            this.$router.push({
                path: '/hotmove',
            })
        },
        hight() {
            // console.log('22');
            this.$router.push({
                path: '/hightmove',
            })
        },
        awards() {
            // console.log('33');
            this.$router.push({
                path: '/awardsmove',
            })
        },
        today() {
            // console.log('44');
            this.$router.push({
                path: '/todaymove',
            })
        }
    }


}
</script>
<style lang="scss" scoped>
.index {
    background-color: #f5f5f5;
    // height: calc(100% - 50px);
    overflow: auto;
    position: relative;
}


.top {
    height: 50px;
    // box-sizing: border-box;
    top: 0;
    position: sticky;
    z-index: 1;

    ::v-deep .van-search__field {
        height: 28px;
    }
}

.pics {
    height: 190px;
    background-color: #4fc08d;
    margin-top: -2px;

    .my-swipe {
        margin-left: 10px;

        img {
            width: 355px;
            height: 190px;
        }
    }
}

// 宫格
.gongge {
    width: 355px;
    margin-left: 10px;
    margin-top: 10px;

    .van-icon-fire-o:before {
        color: yellowgreen;
    }

    // .van-icon-bar-chart-o:before {
    //     color: red;
    // }

    // .van-icon-gem-o:before {
    //     color: blue($color: #1e5ea7);
    // }

    // .van-icon-underway-o:before {
    //     color: rgb(188, 45, 227);
    // }
}

.huadong {
    width: 355px;
    height: 220px;
    margin-left: 10px;
    margin-top: 10px;
    background-color: #fff;

    .my-swipe2 {
        img {
            width: 94px;
            height: 134px;
        }

        div {
            font-size: 0.37333333rem;
            text-overflow: ellipsis;
            /* 溢出显示省略号 */
            overflow: hidden;
            /* 溢出隐藏 */
            white-space: nowrap;
            /* 强制不换行 */
        }
    }

    .hotfang {
        height: 42px;
        display: flex;
        justify-content: space-between;
        line-height: 42px;

    }
}
</style>